<!--
<template>
<div>
&lt;!&ndash;  <div style="display: flex;align-items: center;box-shadow: 0 0 10px rgba(0,0,0,.1);padding: 10px 20px; border-radius:50%">
    &nbsp;基于Spring Boot和Vue.js技术的管理平台
  </div>&ndash;&gt;
  <div style="display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 50%;">
    基于Spring Boot和Vue.js技术的管理平台
  </div>
&lt;!&ndash;  <div style="display: flex">
    <el-card style="width: 100%">
      <div slot="header" class="clearfix">
        <div style="display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px;">
         技术选型
        </div>
        <div style=" align-items: center;box-shadow: 0 0 10px rgba(0,0,0,.1);padding: 10px 20px;margin: 20px 0;width: 500px">
         <h3>后端：采用Spring Boot框架，利用其强大的依赖管理和自动配置功能快速搭建微服务架构，实现业务逻辑处理、数据存储与访问等功能。<br></h3>
        </div>
        <div style=" align-items: center;box-shadow: 0 0 10px rgba(0,0,0,.1);padding: 10px 20px;margin: 20px 0;width: 500px">
          <h3>前端：使用Vue.js框架，结合Vuex状态管理、Vue Router路由管理等工具，构建响应式、交互性强的用户界面。。</h3>
        </div>
        <div style="align-items: center;box-shadow: 0 0 10px rgba(0,0,0,.1);padding: 10px 20px;margin: 20px 0;width: 500px">
          <h3>数据库：选用MySQL作为关系型数据库管理系统，用于存储用户信息、课程资料等数据。</h3>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div style="margin: 10px 0"><strong>主题色</strong></div>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
    </el-card>
  </div>&ndash;&gt;
  <div style="display: flex; flex-direction: column; height: 100vh; overflow: hidden;">
    <el-card style="width: 100%; height: 100%; display: flex; flex-direction: column;">
      <div slot="header" class="clearfix" style="background-color: #f5f5f5; padding: 10px 20px; border-bottom: 1px solid #ddd; text-align: center;">
        <div style="display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px;">
          欢迎你,{{user.name}},祝你开心每一天
        </div>
      </div>
      <div style="flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 20px;">
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>后端：采用Spring Boot框架，利用其强大的依赖管理和自动配置功能快速搭建微服务架构，实现业务逻辑处理、数据存储与访问等功能。</h3>
        </div>
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>前端：使用Vue.js框架，结合Vuex状态管理、Vue Router路由管理等工具，构建响应式、交互性强的用户界面。</h3>
        </div>
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>数据库：选用MySQL作为关系型数据库管理系统，用于存储用户信息、课程资料等数据。</h3>
        </div>
      </div>
      <div style="padding: 20px; background-color: #f5f5f5; border-top: 1px solid #ddd;">
        <div style="margin: 10px 0; font-weight: bold;">主题色</div>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
      <div style="display: flex">
        <div style="width: 50%">
          <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
          <el-timeline style="padding: 0">
            <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time" placement="top">
              <el-card>
                <h4>{{ item.title }}</h4>
                <div v-html="item.content"></div>
              </el-card>
            </el-timeline-item>
          </el-timeline>

        </div>

      </div>
    </el-card>
  </div>

</div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      user: JSON.parse(localStorage.getItem("honey-user") || '{}'),
      notices:[],
    }
  },
  created() {
    this.loadNotice()
  },
  methods:{
    loadNotice(){
      this.$request.get('/notice/selectUserData').then(res => {
        this.notices = res.data
      })
    }

  }
}
</script>

<style scoped>

</style>-->
<template>
  <div style="display: flex; flex-direction: column; height: 100vh; overflow: hidden;">
    <el-card style="width: 100%; height: 100%; display: flex; flex-direction: column;">
      <div slot="header" class="clearfix"
           style="background-color: #f5f5f5; padding: 10px 20px; border-bottom: 1px solid #ddd; text-align: center;">
        <div
            style="display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px;">
          欢迎你, {{ user.name }}, 祝你开心每一天
        </div>
      </div>
      <div style="flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 20px;">
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>后端：采用Spring
            Boot框架，利用其强大的依赖管理和自动配置功能快速搭建微服务架构，实现业务逻辑处理、数据存储与访问等功能。</h3>
        </div>
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>前端：使用Vue.js框架，结合Vuex状态管理、Vue Router路由管理等工具，构建响应式、交互性强的用户界面。</h3>
        </div>
        <div style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
          <h3>数据库：选用MySQL作为关系型数据库管理系统，用于存储用户信息、课程资料等数据。</h3>
        </div>
      </div>
      <div style="padding: 20px; background-color: #f5f5f5; border-top: 1px solid #ddd;">
        <div style="margin: 10px 0; font-weight: bold;">主题色</div>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
      <div style="display: flex; padding: 20px;">
        <div style="width: 50%; margin-right: 20px;">
          <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
          <el-timeline style="padding: 0">
            <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time" placement="top">
              <el-card style="border-radius: 8px;">
                <h4>{{ item.title }}</h4>
                <div v-html="item.content"></div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div style="width: 50%;">
          <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">其他信息</div>
          <div
              style="background-color: #f9f9f9; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 8px;">
            <div style="margin-bottom: 20px;">
              <h4>最新活动</h4>
              <ul>
                <li>2024年10月25日 - 新功能上线：支持多语言切换</li>
                <li>2024年11月1日 - 用户反馈活动：参与即有机会赢取精美礼品</li>
                <li>2024年11月15日 - 技术分享会：邀请行业专家讲解最新技术趋势</li>
              </ul>
            </div>
            <div style="margin-bottom: 20px;">
              <h4>常见问题</h4>
              <ul>
                <li><strong>Q:</strong> 如何重置密码？<br><strong>A:</strong> 请前往登录页面点击“忘记密码”，按照提示操作即可。
                </li>
                <li><strong>Q:</strong> 如何联系客服？<br><strong>A:</strong> 您可以通过在线聊天或拨打客服电话
                  123-456-7890 联系我们。
                </li>
                <li><strong>Q:</strong> 支持哪些支付方式？<br><strong>A:</strong> 我们支持支付宝、微信支付和银行卡支付。
                </li>
              </ul>
            </div>
            <div>
              <h4>关于我们</h4>
              <p>
                我们是一家专注于技术研发的公司，致力于为用户提供高效、安全、便捷的服务。我们的团队由一群充满激情的技术专家组成，不断探索和创新，为用户带来更好的体验。</p>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("honey-user") || '{}'),
      notices: [],
    }
  },
  created() {
    this.loadNotice()
  },
  methods: {
    loadNotice() {
      this.$request.get('/notice/selectUserData').then(res => {
        this.notices = res.data
      })
    }
  }
}
</script>

<style scoped>
.el-card {
  border-radius: 8px;
}

.el-timeline {
  padding: 0;
}

.el-timeline-item {
  padding: 10px 0;
}

.el-timeline-item__node {
  background-color: #409eff;
}

.el-timeline-item__wrapper {
  padding-left: 10px;
}

.el-timeline-item__content {
  margin-top: 10px;
}

.el-button {
  margin-right: 10px;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

p {
  margin: 0;
  font-size: 14px;
  color: #666;
}
</style>
